<template>
    <div class="commentItem">
        <item :parent="parent.parent" v-if="parent.parent" @replayComment='replayComment'></item>
        <div class="top">
            <div class="left">
                <span>{{parent.user && parent.user.nickname}}</span> &nbsp;&nbsp;&nbsp;
                <span>{{parent.create_date}}</span>
            </div>
            <span @click="replayComment(parent)">回复</span>
        </div>
        <div class="bottom">{{parent.content}}</div>
    </div>
</template>

<script>
export default {
    // 为组件设置name属性，他就可以当成组件标签来使用
    name:'item',
    // 调用这个组件时，评论数据的parent
    props:['parent'],
    methods: {
        replayComment(parent){
            this.$emit('replayComment',parent)
        }
    }
}
</script>

<style lang='less' scoped>
    .commentItem{
        border: 1px solid #ccc;
        padding: 5px;
        margin-top: 10px;
        .top{
            font-size: 12px;
            color: #aaa;
            display: flex;
            justify-content: space-between;
        }
        .bottom{
            font-size: 13px;
            line-height: 40px;
        }
    }
</style>